<template>
    <div class="main">
        <el-container>
            <el-aside :width="$store.state.isCollapse?'180px' : '64px'" >
                <navigation></navigation>
            </el-aside>
            <el-container>
                <el-header> 
                    <headerRight></headerRight>
                    <tagView></tagView>
                </el-header>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import headerRight from '../components/headerRight.vue'
import navigation from '../components/navigation.vue'
import tagView from '../components/tagView/tagView.vue'
import { ref } from 'vue'


</script>

<style scoped lang="scss">
.main{
    width: 100%;
    height: 100vh;
    overflow: hidden;
    .el-container{
        width: 100%;
        height: 100%;
        .el-aside{
            height: 100%;
            transition: all 1s;
        }
    }
}
.main::-webkit-scrollbar {
  display: none;
}
.el-header{
    height: 100px;
    padding: 0;
}
.el-main{
    padding: 0;
}
</style>